<template>
  <!-- 原本的写法：<div class="todo-item"> 现在需要同时绑定todo-completed的样式，可以通过数组的形式同时绑定todo-item和todo-completed -->
  <div :class="['todo-item', todo.completed ? 'todo-completed' : '']">
    <!-- 实现checkbox的双向绑定 -->
    <!-- 通过自定义的事件来绑定input框的状态改变 -->
    <input type="checkbox" :checked="todo.completed" @change="handleChange"/>
    <label>{{ todo.content }}</label>
    <button @click="removeClick"></button>
  </div>
</template>

<script>
export default {
  name: 'TodoItem',
  props: {
    todo: {
      type: Object,
      require: true,
    },
  },
  methods: {
    removeClick() {
      this.$emit('remove', this.todo);
    },
    handleChange() {
      // console.log('子组件的checkbox状态改变了');
      // 触发自定义事件，提交给父组件去处理
      // 应用到的核心技术点：子组件向父组件传值
      this.$emit('toggle',this.todo.id)
    }
  },
};
</script>

<style lang="stylus">
@import '~styles/theme.styl';

// 引入mixin文件
@import '~styles/mixins.styl';

  .todo-item
    // 使用flex布局
    display: flex
    // 水平方向 flex项目的排列(两端对齐)
    justify-content: space-between
    align-content: center
    padding: 10px
    border-top 1px solid rgba(0, 0, 0, 0.1)
    font-size 24px

    input
      clearDefault()
      &::after
        content: url('~images/unChecked.svg')
      &:checked::after
        content: url('~images/Checked.svg')
    label
      flex 1
      padding-left 10px
      padding-top: 4px;
    button
      width 40px
      height 40px
      background-color transparent
      clearDefault()
      cursor: pointer
    &:hover
      button::after
        content: 'X'
        font-size: 24px
        color: $lightred
    &.todo-completed
      label
        text-decoration: line-through
        color: #999
</style>
